
<template>
  <div class="call-record">
    <h3>通话记录</h3>
    <audio
      ref="audioPlayer"
      :src="audioSrc"
      controls
      class="audio-player"
    ></audio>
    <div class="messages">
      <div
        v-for="record in callRecords"
        :key="record.id"
        :class="['message', record.isUser ? 'user-message' : 'system-message']"
      >
        <!-- 1. 系统消息：对话框居左，按钮在右侧；用户消息：对话框居右，按钮在左侧 -->
        <!-- 对话框容器 -->
        <div class="content-wrapper">
          <div class="content">{{ record.content }}</div>
        </div>
        <!-- 音频按钮（使用VideoPlay图标并绑定事件） -->
        <el-button
          size="mini"
          class="audio-btn"
          @click="handlePlaySingleAudio(record)"
          circle
        >
          <!-- 使用VideoPlay图标组件 -->
          <el-icon>
            <VideoPlay />
          </el-icon>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref } from 'vue'

defineProps({
  callRecords: {
    type: Array,
    required: true
  }
})

const audioSrc = ref('') // 实际项目中替换为真实音频地址，这里可先空着或填示例地址
// const singleAudioRef = ref(null) // 可新增单条消息的音频播放器（可选）
// 单条消息音频播放逻辑（示例：可根据 record 中的 audioSrc 播放）
const handlePlaySingleAudio = (record) => {
  console.log('播放单条消息音频', record)
  // 实际逻辑：设置 singleAudioRef 的 src 并播放
  // if (record.audioSrc) {
  //   singleAudioRef.value.src = record.audioSrc
  //   singleAudioRef.value.play()
  // }
}
</script>

<style lang="scss" scoped>
.call-record {
  padding: 20px;
  border-radius: 8px;
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex; // 新增：开启 Flex 垂直布局，控制内部元素高度分配
  flex-direction: column; // 垂直排列（标题 + 音频 + 对话）
  box-sizing: border-box; // 新增：padding 包含在 height 内
}

h3 {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
}

.audio-player {
  width: 100%;
  margin-bottom: 10px;
}

.messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: #eef1f7;
  border-radius: 8px;
  //max-height: 600px;
  flex: 1; // 核心：占满 .call-record 的剩余高度（减去标题和音频的高度）
  font-size: 14px;
  padding: 15px; // 内部间距，避免对话贴边
  overflow-y: auto; // 内容超出时显示垂直滚动条
  // 滚动条美化（可选）
  &::-webkit-scrollbar {
    width: 6px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
  }
}

// 1. 新增：内容+按钮的横向容器
.content-wrapper {
  // 关键1：减小内边距（从10px→8px），减少非文本占用宽度
  padding: 8px 10px;
  border-radius: 8px;
  // 关键2：优化换行规则，仅长单词/超宽时换行，减少不必要换行
  word-break: break-word;
  overflow-wrap: break-word; // 兼容多浏览器，同break-word效果
  line-height: 1.5; // 保持可读性，避免行高过小挤在一起
}

// 4. 音频按钮样式微调（保持小巧，与对话框对齐）
.audio-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  flex-shrink: 0; // 按钮不收缩，固定尺寸
  background-color: #f0f0f0;
  color: #666;

  &:hover {
    background-color: #e0e0e0;
    color: #333;
  }

}


.message {
  max-width: 80%;
  padding: 0px;
  border-radius: 8px;
  // 新增：让气泡内的内容容器可换行（避免内容+按钮过宽）
  word-break: break-word;
  // 核心：开启flex布局，让对话框和按钮横向排列
  display: flex;
  align-items: center; // 垂直居中对齐
  gap: 6px; // 对话框与按钮的水平间距（间隔距离）
}

// 2. 系统消息：对话框居左，按钮在右侧
.system-message {
  background-color: transparent; // 清除原有背景（避免覆盖整个flex容器）
  align-self: flex-start; // 保持整体居左

  // 对话框（content-wrapper）添加白色背景（原气泡样式）
  .content-wrapper {
    background-color: #ffffff;
    padding: 10px;
    border-radius: 8px;
    max-width: calc(100% - 30px); // 预留按钮宽度（24px）+ 间距（8px）
  }
}


// 3. 用户消息：对话框居右，按钮在左侧
.user-message {
  background-color: transparent; // 清除原有背景
  align-self: flex-end; // 保持整体居右
  flex-direction: row-reverse; // 反转排列顺序（按钮在左，对话框在右）

  // 对话框（content-wrapper）添加绿色背景（原气泡样式）
  .content-wrapper {
    background-color: #a0e75a;
    padding: 10px;
    border-radius: 8px;
    max-width: calc(100% - 30px); // 预留按钮宽度+间距
  }
}



.time {
  font-size: 12px;
  color: #999;
}
</style>
